<template>
    <div class="myself">
        <div class="myselfTop">
            <img :src="user.avatar" alt="头像">
            <p>{{ user.username}}</p>
        </div>
        <van-grid column-num="3">
            <van-grid-item icon="clock-o" text="历史记录" />
            <van-grid-item icon="star-o"  text="我的收藏" to="/collection"/>
            <van-grid-item icon="like-o"  text="我的点赞" to="/favorite"/>
        </van-grid>
        <div class="myselfCell">
            <van-cell title="推荐分享" is-link to="/collection" />
            <van-cell title="意见反馈" is-link  />
            <van-cell title="关于我们" is-link  />
            <van-cell title="退出登录" is-link  @click="loginout"/>
        </div>
    </div>
</template>

<script>
import { getuser } from "@/api/user";
import { Notify } from "vant";
import { deleteToken } from "@/utils/token";
    export default {
        data() {
            return {
                user: {}
            }
        },
         async created(){
            const res = await getuser()
            console.log(res.data.data,'@@!!');
            this.user = res.data.data
        },
        methods: {
            loginout(){
                deleteToken()
                Notify({ type: "success", message: "退出成功" });
                this.$router.push('/login')
            }
        },
    }
</script>

<style lang="scss" scoped>
    .myself{
        height: 100vh;
        background-color: #F5F5F5;

    }
    .myselfTop{
        padding: 40px;
        height: 200px;
        display: flex;
        align-items: center;
        img{
            width: 130px;
            height: 130px;
        }
        p{
            margin-left: 20px;
            font-size: 34px;
            font-weight: bold;
        }
    }
    .myselfCell{
        margin-top: 40px;
    }
</style>